<!--
 * @Author: tian_biao
 * @Date: 2021-08-18 09:54:48
 * @LastEditTime: 2021-08-26 16:19:51
 * @Description: 作业卡执行
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left"  @click="back"/>
                </template>
            </Theader>
        </div>
        <div class="readyCon">
            <div class="sussessBox">
                <div class="fristBox">
                    <div class="ml1rem">
                        <div class="defectXz textColorYb">「待执行」</div>
                        <div class="title">新华园山变电站全面巡视</div>
                    </div>
                    <div class="runRule" @click="runRule">
                        <van-icon name="records" />
                        <div>运行规程</div>
                    </div>
                </div>
                <div class="labelBox ml1rem">
                    <div class="labelTitle">巡视人员</div>
                    <div class="content">唐晓东、周葵</div>
                </div>
                <div class="labelBox ml1rem">
                    <div class="labelTitle">巡视计划时间</div>
                    <div class="content">2021/05/05 9:00</div>
                </div>
                <div class="labelBox ml1rem">
                    <div class="labelTitle">作业类型</div>
                    <div class="content">全面巡视</div>
                </div>
                <div class="labelBox flex ml1rem">
                    <div class="red" @click="godefectDetail('defectDetail')">未消除缺陷：1</div>
                    <div class="orange" @click="godefectDetail('hiddenDangerDetail')">未治理隐患：1</div>
                </div>
            </div>
            <!-- <div class="sussessBox">
                <van-collapse v-model="activeNames" class="bgcf5f6fa">
                    <van-collapse-item class="jg" title="巡视要求" name="1">内容</van-collapse-item>
                    <van-collapse-item class="jg" title="危险点信息" name="2">内容</van-collapse-item>
                </van-collapse>
            </div>
            <div class="robot jg">
                <div>机器人巡视</div>
                <van-switch v-model="checked" active-color="#0EB295" inactive-color="#dcdee0" size="1.5rem" />
            </div> -->
            <div class="tabBox bgcf5f6fa">
                <van-tabs v-model="active" title-active-color="#0EB295" color="#0EB295" :line-width="lineWidth">
                    <van-tab title="巡视作业卡" class="mt1rem">
                        <div class="tabItem">
                            <div class="tabItemSon">
                                <div class="wordTitle">
                                    <div>
                                        <van-icon name="orders-o" size="1.3rem" />
                                        <div class="titleText">巡视作业卡</div>
                                    </div>
                                    <div class="ml_1rem">
                                        <van-icon name="edit" size="1.3rem" />
                                        <div>集中抄录</div>
                                    </div>
                                </div>
                                <div class="wordTitle1 mt1rem">
                                    <div class="deviceType" :class="{selectBtn:SelectActive=='deviceType'}"
                                        @click="selectShowData('deviceType')">
                                        设备类型
                                    </div>
                                    <div class="interval" :class="{selectBtn:SelectActive=='interval'}"
                                        @click="selectShowData('interval')">
                                        间隔单元
                                    </div>
                                </div>
                                <div class="sub mt1rem">
                                    <van-collapse v-model="activeNamesSub">
                                        <van-collapse-item title="主变压器" name="1" class="collapseSub">
                                            <van-collapse v-model="activeNamesSubSon">
                                                <van-collapse-item class="jg bgcccc" title="1#主变-本体及套管" name="1">
                                                    <div class="deviceInfo">
                                                        <div class="flexrow">
                                                            <div class="flexrow">
                                                                <div class="infolabelTitle">
                                                                    设备状态:
                                                                </div>
                                                                <div class="textColorYb">在运</div>
                                                            </div>
                                                            <div class="flexrow">
                                                                <div class="infolabelTitle">
                                                                    实时电流:
                                                                </div>
                                                                <div class="textCon textColor333">10A</div>
                                                            </div>
                                                            <div class="flexrow">
                                                                <div class="infolabelTitle">
                                                                    实时负荷:
                                                                </div>
                                                                <div class="textCon textColor333">10KW</div>
                                                            </div>
                                                        </div>
                                                        <div class="flexrow mt1rem">
                                                            <div class=" flexrow">
                                                                <a href="#">设备台账</a>
                                                            </div>
                                                            <div class="flexrow width8rem">
                                                                <a href="#" @click="toPageDefect" class="colorRed">登记缺陷</a>
                                                                <a href="#" @click="toPageDanger" class="colororange">登记隐患</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="deviceInfo bgcF9F9F9 mt1rem">
                                                        <div class="tourItem flexrow" v-for="(item,index) in tourList"
                                                            :key="index">
                                                            <div class="color838383">{{item.tourContent}}</div>
                                                            <div class="flexrow width3rem ml1rem">
                                                                <van-checkbox checked-color="#0EB295"
                                                                    v-model="item.checked" shape="square">
                                                                </van-checkbox>
                                                                <van-icon name="close" size="1.2rem" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </van-collapse-item>

                                                <van-collapse-item class="jg bgcccc" name="2" title="2#主变">
                                                    <template slot="title">
                                                        <div>2#主变 <span class="red">未消除缺陷：1</span>
                                                            <span class="orange">未治理隐患：1</span></div>
                                                    </template>
                                                    内容
                                                </van-collapse-item>
                                            </van-collapse>
                                        </van-collapse-item>
                                    </van-collapse>
                                </div>
                                <div class="sub mt1rem">
                                    <van-collapse v-model="activeNamesDlq">
                                        <van-collapse-item title="断路器" name="1" class="collapseSub">

                                        </van-collapse-item>
                                    </van-collapse>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="关联任务" class="mt1rem">
                        <div class="defectItem">
                            <div class="rightPart">
                                <div class="timePart">
                                    <div class="fristBox">
                                        <div>
                                            <div class="defectXz textColorYb">「待安排」</div>
                                            <div class="title">花园山变电站熄灯巡视</div>
                                        </div>
                                    </div>
                                    <div class="fristBox">
                                        <div>
                                            <div>交花园山变电 交流110kv</div>
                                        </div>
                                    </div>
                                    <div class="box">
                                        <van-icon name="contact" />
                                        <div>巡视人：</div>
                                        <div class="textShow">--</div>
                                    </div>
                                    <div class="box">
                                        <van-icon name="underway-o" />
                                        <div class="tourTime">巡视计划时间：</div>
                                        <div class="textShow">2021/06/13 11:30</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="defectItem" @click="topageTeamp">
                            <div class="rightPart">
                                <div class="timePart">
                                    <div class="fristBox">
                                        <div>
                                            <div class="defectXz textColorYb">「待安排」</div>
                                            <div class="title">花园山变电站熄灯巡视</div>
                                        </div>
                                    </div>
                                    <div class="fristBox">
                                        <div>
                                            <div>交花园山变电 交流110kv</div>
                                        </div>
                                    </div>
                                    <div class="box">
                                        <van-icon name="contact" />
                                        <div>巡视人：</div>
                                        <div class="textShow">--</div>
                                    </div>
                                    <div class="box">
                                        <van-icon name="underway-o" />
                                        <div class="tourTime">巡视计划时间：</div>
                                        <div class="textShow">2021/06/13 11:30</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="btnBox mt1rem" >
            <div class="addTask"@click="overReady">
                添加任务
            </div>
            <div class="overTour" @click="endTask">
                结束巡视
            </div>
        </div>
        <div class="drag" @click="selectAll" v-drag>
            <div>一键</div>
            <div>打钩</div>
        </div>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Utils from '@/utils/util'
    import { drag } from '../../../../utils/moveBtn'
    export default {
        name: 'scheduling',
        directives: {
            drag
        },
        components: {
            Theader,
        },
        data() {
            return {
                title: "周期巡视",
                activeNames: [],
                activeNamesSubSon: [],
                activeNamesDlq: [],
                activeNamesSub: ["1"],
                checked: true,
                lineWidth: "4rem",// 下划线宽度
                active: 0,// 当前选中
                SelectActive: "deviceType",
                // 巡视列表
                tourList: [
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    }
                ]
            }
        },

        computed: {

        },

        methods: {
            back(){
                this.$router.go(-1)
            },
            /**
             * @description: 登记缺陷
             * @param {*}
             * @return {*}
             */
            toPageDefect() {
                this.$router.push({
                    name:"newAddDefect"
                })
            },
            /**
             * @description: 登记隐患
             * @param {*}
             * @return {*}
             */
            toPageDanger() {
                this.$router.push({
                    name:"newAddDanger"
                })
            },
            /**
             * @description: 缺陷、隐患详情
             * @param {*} name
             * @return {*}
             */
            godefectDetail(name) {
                this.$router.push({
                    name: name,
                    query: {
                        params: ""
                    }
                })
            },
            /**
             * @description: 运行规程
             * @param {*}
             * @return {*}
             */
            runRule() {
                this.$router.push({
                    name: "operatingStandard",
                    query: {
                        params: ""
                    }
                })
            },
            /**
             * @description: 完成准备
             * @param {*}
             * @return {*}
             */
            overReady() {
                this.$router.push({
                    name: "addLsTask",
                    query: {
                        params: ""
                    }
                })
            },
            /**
             * @description: 设备类型、间隔单元点击事件
             * @param {*} type
             * @return {*}
             */
            selectShowData(type) {

                this.SelectActive = type
                console.log(this.SelectActive);
            },
            
            selectAll(){
                console.log(1111);
            },
            /**
             * @description: 结束任务
             * @param {*}
             * @return {*}
             */
            endTask() {
                this.$router.push({
                    name: "finishFileList",
                    query: {
                        params: ""
                    }
                })
            },
            /**
             * @description: 红外测温
             * @param {*}
             * @return {*}
             */
            topageTeamp() {
                this.$router.push({
                    name: "redCapture",
                    query: {
                        params: ""
                    }
                })
            }
        },

        watch: {
        },
        mounted() {
        },
        created() {
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #f5f6fa !important;
        position: relative;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .readyCon {
    margin-top: 1rem;
    height: calc(100vh - 10rem);
    overflow-y: auto;
}

    .sussessBox {
        width: 95%;
        margin: 0 auto;
        /* height: 12rem; */
        /* margin-top: 1rem; */
        border-radius: 12px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
    }

    .fristBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .fristBox>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .defectXz {
        font-family: Source Han Sans CN;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0px;
        text-align: right;
        margin-left: -0.5rem;
    }

    .textColorYb {
        color: #0EB295;
    }

    .title {
        font-style: 2rem;
        font-weight: 600;
        color: black;
    }

    .runRule {
        width: 6rem;
        background-color: #E7F7F5;
        color: #0EB295;
        border-bottom-left-radius: 25px;
        border-top-left-radius: 25px;
        display: flex;
        justify-content: center !important;
        align-items: center;
    }

    .labelBox {
        margin-top: 0.5rem;
    }

    .labelTitle {
        color: #ccc;
    }

    .content {
        margin-top: 0.3rem;
    }

    .flex {
        display: flex;
    }

    .red {
        color: red;
    }

    .orange {
        color: orange;
        margin-left: 1rem;
        padding-bottom: 1rem;
    }

    .ml1rem {
        margin-left: 1rem;
    }

    .mt1rem {
        margin-top: 1rem;
    }

    .bgcf5f6fa {
        background-color: #f5f6fa !important;
    }

    .bgcccc {
        background-color: #ccc !important;
    }


    .jg {
        margin-top: 1rem !important;
        border-radius: 4px !important;
    }

    .robot {
        width: 88%;
        margin: 0 auto;
        height: 2.6rem;
        border-radius: 4px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tabBox {
        width: 95%;
        margin: 0 auto;
        margin-top: 1rem;
    }

    .tabItem {
        width: 98%;
        /* height: 5rem; */
        background-color: #fff;
        border-radius: 4px;
        padding: 1%;
    }

    .tabItemSon {
        width: 95%;
        margin: 0 auto;
        margin-top: 1rem;
    }

    .wordTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 95%;
        color: #0EB295;

    }

    .wordTitle1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: #0EB295;

    }

    .wordTitle>div {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .wordTitle1>div {
        width: 10rem;
        height: 2rem;
        border: 1px solid #ccc;
        color: #333;
        text-align: center;
        line-height: 2rem;
    }

    .deviceType {
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .interval {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }

    .selectBtn {
        border: 1px solid #0EB295 !important;
        color: #0EB295 !important;
        background-color: #E7F7F5 !important;
    }

    .ml_1rem {
        margin-left: -1rem;

    }

    .titleText {
        margin-left: 0.5rem;
        color: #333;
    }

    .sub {
        width: 95%;
        border: 1px solid #0EB295;
        border-radius: 4px;
        overflow: hidden;
    }

    .collapseSub {
        border-radius: 4px;
    }

    .btnBox {
        width: 100%;
        height: 5rem;
        background-color: #fff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .btnBox>div {
        flex: 0.4;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        border-radius: 4px;
    }

    .overTour {
        background-color: #0EB295;
        color: #fff;
    }

    .addTask {
        border: 1px solid #0EB295;
        color: #0EB295;
    }

    .defectItem {
        margin-bottom: 10px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        /* margin-top: 1rem; */
        border-radius: 4px;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #ccc;
        position: relative;
        overflow: hidden;

    }

    .defectItem .rightPart {
        width: 100%;
    }

    .fristBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .fristBox>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .box {
        display: flex;
        margin-top: 0.5rem;
        align-items: center;
        color: #333;
    }

    .defectXz {
        /* color: #0EB295; */
        font-family: Source Han Sans CN;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0px;
        text-align: right;
        margin-left: -0.5rem;
    }

    .textColorYb {
        color: #0EB295;
    }

    .textColor333 {
        color: #333;
    }

    .tourTime {
        min-width: 110px;
    }

    .textShow {
        width: 35%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .infolabelTitle {
        color: #838383;
    }

    .flexrow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    a {
        text-decoration: underline;
    }

    .colorRed {
        color: red;
    }

    .colororange {
        color: orange;
    }

    .width8rem {
        width: 8rem;
    }

    .width3rem {
        width: 3rem;
    }

    .bgcF9F9F9 {
        background-color: #F9F9F9;
    }

    .color838383 {
        color: #838383;
    }

    .tourItem {
        padding: 1rem;
    }

    .drag {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: #0EB295;
        font-size: 0.5rem;
        text-align: center;
        position: absolute;
        bottom: 10%;
        right: 5%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 4px 0px #0EB295;
        z-index: 999;
    }

</style>